<template>
  <div>
    <mynavbar></mynavbar>
    <img
      src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png"
      alt=""
    />
    <div class="ip">
      <div class="sjh">
        <input type="text" v-model="str" placeholder="请输入手机号" />
      </div>
      <div class="yzm">
        <input type="text" v-model="text" placeholder="请输入短信验证码" />
        <button @click="yzm">获取验证码</button>
      </div>
      <div class="text">
        <span>遇到问题？</span>
        <p>使用密码验证登录</p>
      </div>
      <div class="dl">
        <button @click="dl">登录</button>
      </div>

      <div class="ys">
        <van-checkbox v-model="checked" shape="square"></van-checkbox>
        <p>
          同意<span>《服务条款》</span>和<span>《隐私政策》</span>和<span
            >《同意严选服务协议》</span
          >
        </p>
      </div>

      <div class="qiehuan" @click="fun">
        <p>其他登录方式></p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
import mynavbar from "../item/mynavbar.vue";
export default {
  data() {
    return {
      checked: true,
      str: "",
      text: "",
    };
  },
  components: {
    mynavbar,
  },
  methods: {
    fun() {
      this.$router.push("/my").catch((err) => {});
    },
    yzm() {
      let reg = /^\d{11}$/;
      if (reg.test(this.str)) {
        service({
          url: "http://118.178.238.19:3001/api/user/dosendmsgcode",
          method: "post",
        }).then((res) => {
          alert(`验证码为：${res.data.data}`);
        });
      } else {
        alert("请输入正确的手机号");
      }
    },
    dl() {
      service({
        url: "http://118.178.238.19:3001/api/user/docheckcode",
        method: "post",
        data: {
          telcode: this.text,
        },
      }).then((res) => {
        if (res.data.code == "200") {
          //
          // console.log(res);
          sessionStorage.setItem(
            "token",
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZWwiOiIxMTExMTExMTExMSIsImlhdCI6MTY3NjAxNzkwNCwiZXhwIjoxNjc3MzEzOTA0fQ.N9ehnEvjcU6ef8IMZMxEAH4HvjijX1-dSlYbW8boBDM"
          );
          sessionStorage.setItem(
            "userid",
            "user_3eefda5a-08a3-4c90-b106-fe7b24536de8"
          );
          this.$router.push("/personal").catch((err) => {});
          console.log(res);
          sessionStorage.setItem("phone", this.str);
        } else {
          alert("验证码错误");
        }
      });
    },
  },
};
</script>

<style scoped>
img {
  width: 8.375rem;
  height: 2.8125rem;
  position: absolute;
  top: 6.125rem;
  left: 7.125rem;
}
input {
  width: 13.75rem;
  border: none;
  height: 2.125rem;
}
.ip {
  display: flex;
  height: 7.5rem;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 10.25rem;
  left: 1.25rem;
}
.sjh {
  border-bottom: 1px solid #999;
  height: 3.75rem;
  line-height: 3.75rem;
  width: 20rem;
}
.yzm {
  border-bottom: 1px solid #999;
  height: 3.75rem;
  line-height: 3.75rem;
  width: 20rem;
}
.yzm button {
  border: none;
  background: #fff;
  height: 2.175rem;
  line-height: 1.875rem;
  border: 1px solid #999;
}
.text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 20rem;
  margin: 1.25rem 0;
}
span {
  color: #999;
}
.dl button {
  width: 20rem;
  height: 2.5rem;
  text-align: center;
  color: #fff;
  background: #dd1a21;
  border: none;
}
.ys {
  font-size: 0.8rem;
  display: flex;
  margin: 1rem 0;
}
.ys span {
  color: #007aff;
}
.qiehuan {
  text-align: center;
}
</style>